<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <img src="@/assets/logo.png" class="logo" />
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          v-model="verticalMenuKey"
          @click="handleClick"
        >
          <a-menu-item v-for="menu in verticalMenu" :key="menu.key">
            <a-icon :type="menu.iconType" />
            <span>{{ menu.label }}</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 10px">
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: 'calc(100vh - 84px)',
          }"
        >
          <router-view ref="child"></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { APP_VERTICAL_MENU } from "@/views/home/index";
export default {
  name: "home",
  components: {},
  data() {
    return {
      verticalMenuKey: ["app-info"],
      verticalMenu: APP_VERTICAL_MENU,
    };
  },
  created() {},
  watch: {},
  methods: {
    handleClick({ key }) {
      if (this.$route.path.indexOf(key) > -1) {
        return;
      }
      this.$router.push(key);
    },
  },
};
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>
